<template>
    <div class="userbody">
        <div class="userheader">个人中心
            <el-tabs v-model="nowtab" :stretch="true">
                <el-tab-pane label="我的收藏" name="first"></el-tab-pane>
                <el-tab-pane label="歌单" name="second">歌单内容</el-tab-pane>
                <el-tab-pane label="歌手" name="third">歌手内容</el-tab-pane>
            </el-tabs>
        </div>
        <!--<el-dropdown>-->
        <!--<el-button type="primary" round>-->
        <!--播放歌单<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
        <!--</el-button>-->
        <!--<el-dropdown-menu slot="dropdown">-->
        <!--<el-dropdown-item>黄金糕</el-dropdown-item>-->
        <!--<el-dropdown-item>狮子头</el-dropdown-item>-->
        <!--</el-dropdown-menu>-->
        <!--</el-dropdown>-->
        <div class="usercontent" v-show="nowtab=='first'?true:false">
            <div class="user_first_top" v-if="!checkboxflag">
                <span @click="multiselect">多选</span>
                <i class="el-icon-search"></i>
            </div>
            <div class="user_first_top_checkbox" v-else>
                <el-checkbox v-model="checkall" @change="handleCheckAll">全选</el-checkbox>
                <span @click="multiselect">完成</span>
            </div>
            <listitem :is-personal-center="true" :ischeckbox="checkboxflag" :ischeckall="ischeckall"
                    :checkall="checkall"  @changecheckall="changecheckall" :cancel="todo.cancel" :add="todo.add"></listitem>
        </div>
        <div class="userbottom" v-if="checkboxflag">
            <div class="userbottomadd" @click="addCheckedToList">添加
                <i class="el-icon-folder-add"></i></div>
            <div class="userbottomunlike" @click="cancelChecked">取消收藏
                <i class="el-icon-star-off"></i></div>
        </div>

    </div>
</template>

<script>
  import listitem from '../player/listitem.vue'

  export default {
    name: 'user',
    data() {
      return {
        nowtab: 'first',
        choose: 1,
        // 是否启用多选框
        checkboxflag: false,
        // 全选状态
        checkall: false,
        //  因为不在同一组件 需要监听全选是否点击 每点击一次数据取反(用于操作子组件)
        ischeckall: false,
        //  存储子组件checkboxnum
        checkboxNum: [],
        //  传递给子组件做何种操作
        todo: {
          'add': false,
          'cancel': false
        }
      }
    },
    methods: {
      // 添加到播放列表
      addCheckedToList(){
        this.todo.add=true;
        // 将多选页面关闭
        this.checkboxflag = false;
        console.log(this.todo)
      },
      // 取消收藏
      cancelChecked(){
        this.todo.cancel=true;
        // 将多选页面关闭
        this.checkboxflag = false;
        console.log(this.todo)
      },
      // 获取子组件全选的情况：是否全选,子组件checkbox数组
      changecheckall(ischecked) {
        this.checkall = ischecked;
      },
      //点击全选
      handleCheckAll(val) {
        this.checkall = val;
        this.ischeckall = !this.ischeckall;
      },
      // 点击多选后
      multiselect() {
        this.checkboxflag = !this.checkboxflag;
        // 取反使子组件进行数据变化
        this.ischeckall = !this.ischeckall;
        // 监听全选为false
          this.checkall=false;
        // 操作重置为false
        this.todo.add=false;
        this.todo.cancel=false;
      }
    },
    components: {
      listitem
    }
  }
</script>

<style scoped>
    .userbody {
        /*height: 100vh;*/
        overflow: auto;
        width: 100%;
        padding-top: 4.5rem;
    }

    .userheader {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1999;
        width: 100%;
        /*width: 100vw;*/
        color: rgb(255, 205, 50);
        line-height: 2.5rem;
        height: 5.2rem;
    }

    .el-tabs {
        padding-left: 1rem;
        padding-right: 1rem;

    }

    /*深度选择*/
    /deep/ .el-tabs__nav {
        /*border-bottom-color: #000;*/
    }

    /deep/ .el-tabs__item {
        color: white;
        /*padding-right: 0.5em;*/
    }

    /deep/ .el-tabs__item.is-active {
        color: #409EFF;
    }

    .el-dropdown {
        height: 3rem;
    }

    .el-button {
        float: right;
    }

    .usercontent {
        width: 100%;
        padding-top: 2.2rem;
    }

    .user_first_top {
        width: 100%;
        position: fixed;
        z-index: 2000;
        top: 5rem;
        right: 0;
        display: flex;
        flex-direction: row-reverse;
    }

    .user_first_top i {
        padding-right: 0.5rem;
        line-height: 2em;
    }

    .user_first_top span {
        padding-right: 0.5rem;
        line-height: 2em;
    }

    .user_first_top_checkbox {
        position: fixed;
        z-index: 2000;
        top: 5rem;
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    .user_first_top_checkbox span {
        padding-right: 0.5rem;
        line-height: 2em;
    }

    .user_first_top_checkbox /deep/ label {
        line-height: 2em;
    }

    .userbody .userbottom {
        position: fixed;
        display: flex;
        justify-content: space-between;
        line-height: 5rem;
        color:black;
        z-index: 9001;
        height: 5rem;
        width: 100%;
        bottom: 0;
        background-color: lightgrey;
    }
    .userbottom > *{
        flex:1;
        border-right: 1px solid black;
    }
    .userbottom > *:last-child{
        border: none;
    }
</style>
